<template>
	<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="curPage" :page-sizes="pageSizes" :page-size.sync="pageSize" :layout="layout"
		:total="total" v-if="total > 0">
		<span class="el-pagination__total">共 {{total}} 条{{notice}}</span>
	</el-pagination>
</template>

<script>
	export default {
		name: 'swPagination',
		methods: {
			handleSizeChange(val = this.limit) {
				this.$emit('change');
			},
			handleCurrentChange(val = this.page) {
				this.$emit('change');
			}
		},
		computed: {
			curPage: {
				get() {
					return this.page;
				},
				set(val) {
					this.$emit('update:page', val);
				}
			},
			pageSize: {
				get() {
					return this.limit;
				},
				set(val) {
					this.$emit('update:limit', val);
				}
			}
		},
		props: {
			total: {
				require: true,
				type: Number
			},
			page: {
				require: true,
				type: Number,
				default: 1
			},
			limit: {
				require: true,
				type: Number,
				default: 5
			},
			pageSizes: {
				type: Array,
				default () {
					return [5, 10, 20, 50, 100];
				}
			},
			layout: {
				type: String,
				default: 'slot, prev, pager, next, jumper'
			},
			notice: {
				type: String,
				default: ''
			}
		}
	};
</script>
<style lang="scss" scoped>
	.el-pagination ::v-deep {
		display: flex;
		font-size: 0;
		line-height: 0;
		.el-pagination__total {
			flex: 1;
			overflow: hidden;
			font-weight: normal;
		}
		.el-input__inner {
			height: 100%;
		}
		&.is-background .el-pager li:not(.disabled):hover {
			color: #357C65;
		}
		&.is-background .el-pager li:not(.disabled).active:hover {
			color: #fff;
		}
		&.is-background .el-pager li:not(.disabled).active {
			background-color: #357C65;
		}
	}
</style>